<template>
    <div style="margin-top: 1vw;margin-bottom: 1vw">
        <el-page-header @back="goBack">
        </el-page-header>
    </div>
    <div class="top">
            <img	
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
        <div class="right">
            <div style="display: flex; align-items: center; transform: translateX(7%);">
                <h2>{{ userNickName}}</h2>
                <p style="margin-left: 1vw;">{{ userIdentifyTag }}</p>
            </div>
            <div class="data">
                <div>
                    <p style="">粉丝数</p>
                    <p >0</p>
                </div>
                <div>
                    <p style="">订阅数</p>
                    <p >0</p>
                </div>
                <div>
                    <p style="">点赞次数</p>
                    <p >0</p>
                </div>
                <div >
                    <p style="">粉丝数</p>
                    <p >0</p>
                </div>
                <div>
                    <p style="">收藏数</p>
                    <p >0</p>
                </div>
            </div>
        </div>
    </div>
    <div class="writer">
        <h3>已发布作品</h3>
        <persaonal_card v-for="item in 5"></persaonal_card>  
    </div> 
</template>

<script lang="ts" setup name="">
    import persaonal_card from './personal_card/index.vue'
    import { useLoginStore } from '@/store/login_data';
    import { storeToRefs } from 'pinia';
    import { toRef } from 'vue';
    import { useRouter } from 'vue-router';
    import { Ref,computed } from 'vue';
    const route = useRouter()
    const user = storeToRefs(useLoginStore())
    const userinfo = toRef(user.userinfo.value)
    const userNickName =computed(()=>{
        return userinfo.value.userNickName || 'user';
    })
    const userIdentifyTag = computed(()=>{
        return userinfo.value.userIdentifyTag || '普通用户'
    })
    function goBack(){
        route.push({path:'/forum'})
    }
</script>

<style scoped lang="scss">
    .top{
        display: flex;
        align-items: center;
        
        .right{
            width: 80%;
            
            .data{
                display: flex;
                > div {  
                    flex: 1;  
                    text-align: center;  
                    &:not(:last-child) {  
                        border-right: 1px solid;  
                    }  
                }
            }
        }
    }
    .writer{
        margin-top: 3vw;
        margin-bottom: 5vw;
        >div{
            margin-top: 1vw;
        }
    }
</style>
